<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>


    <el-input
        placeholder="请输入名称"
        v-model="goodsName"
        clearable
        size="medium"
        style="width: 250px;"
    >
    </el-input>

    <el-input
        placeholder="请输入作者名称"
        v-model="author"
        clearable
        size="medium"
        style="width: 250px;margin-left: 100px"
    >
    </el-input>

    <el-button type="primary" icon="el-icon-search" style="margin-left: 50px" @click="fetchData">搜索</el-button>
    <el-button type="primary" plain style="margin-left: 50px" @click="handleAdd">新增</el-button>

    <el-table :data="goodsList"
              style="width: 100%;overflow: auto"
              border :center="true"
              :row-class-name="tableRowClassName">
      <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="account"
          label="用户"
          class-name="text-overflow"
          show-overflow-tooltip="true">
      </el-table-column>

      <el-table-column
          prop="password"
          label="密码"
          class-name="text-overflow"
          show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          width="400"
          align="center"
          label="操作">
        <!-- 表格列配置 -->

        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="danger" @click="showDeleteConfirm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <el-pagination
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


    <!--   查看-->
    <el-dialog
        title="商品详情"
        :visible="dialogVisible_look"
        @close="dialogVisible_look = false"
    >
      <table>
        <tr>
          <td>商品名称：</td>
          <td>{{ selectedGood.name }}</td>
        </tr>
        <tr>
          <td>商品编号：</td>
          <td>{{ selectedGood.goodsno }}</td>
        </tr>
        <tr>
          <td>作者：</td>
          <td>{{ selectedGood.author }}</td>
        </tr>
        <tr>
          <td>出版社：</td>
          <td>{{ selectedGood.publisher }}</td>
        </tr>
        <tr>
          <td>上架时间：</td>
          <td>{{ selectedGood.pubtime }}</td>
        </tr>

        <tr v-if="selectedGood && selectedGood.description">
          <td>详情：</td>

          <td>{{ truncateText(selectedGood.description) }}</td>
        </tr>

        <tr>
          <td>库存：</td>
          <td>{{ selectedGood.stock }}</td>
        </tr>

      </table>
    </el-dialog>


    <!--    编辑-->
    <el-dialog
        title="商品详情"
        :visible="dialogVisible"
        @close="dialogVisible = false">
      <el-form
          :model="form"
          label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="form.goodsno"/>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author"/>
        </el-form-item>

        <el-form-item label="出版社">
          <el-input v-model="form.publisher"/>
        </el-form-item>

        <el-form-item label="详情">
          <el-input v-model="form.description"/>
        </el-form-item>

        <!-- 其他表单项依此类推 -->
        <el-form-item>
          <el-button type="primary" @click="updateGoods">更新保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    新增-->
    <el-dialog
        title="商品详情"
        :visible="addDialogVisible"
        @close="addDialogVisible = false"
    >
      <el-form
          :model="addFromJson"
          label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="addFromJson.name"/>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="addFromJson.goodsno"/>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="addFromJson.author"/>
        </el-form-item>

        <el-form-item label="出版社">
          <el-input v-model="addFromJson.publisher"/>
        </el-form-item>

        <el-form-item label="详情">
          <el-input v-model="addFromJson.description"/>
        </el-form-item>

        <!-- 其他表单项依此类推 -->
        <el-form-item>
          <el-button type="primary" @click="addGoods">新增保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      user: {
        account: 'zhangsan', // 示例用户信息
        avatar: 'path/to/user/avatar.png',
      },
      goodsList: [], // 商品列表数据
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      currentPage: 1,// 当前页数

      dialogVisible: false, // 控制弹窗显示隐藏
      dialogVisible_look: false,//查看详情
      addDialogVisible: false,//新增
      selectedGood: {}, // 存储选中的商品信息
      form: {}, // 编辑的表单数据
      goodsName: '', //书名
      author: '', // 作者
      addFromJson: {}
    };
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else if (rowIndex % 2 === 1) {
        return 'success-row';
      }
      return '';
    },
    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchData();
    },
    //页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    //查看商品信息
    handleView(row) {
      this.selectedGood = row;
      this.dialogVisible_look = true;
    },
    //修改商品
    handleEdit(row) {
      this.form = {...row}; // 将选中的商品数据复制到表单数据中
      console.log("当前修改选择的数据是：" + JSON.stringify(this.form))
      this.dialogVisible = true;
    },
    //新增商品
    handleAdd() {
      this.addDialogVisible = true;
    },
    //大于15个字显示...
    truncateText(text) {
      return text.length > 15 ? text.slice(0, 15) + '...' : text;
    },

    //分页获取数据
    fetchData() {
      // 调用接口获取数据，并更新goodsList、total等数据
      // 示例代码：假设this.$http.get获取数据的方法
      const queryParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: this.goodsName,
        author: this.author
      };
      console.log("当前构造查询对象：", queryParams)

      //send 请求 获取total 和 数据  发送query 参数
      //url:http://localhost:8099/goods/findGoods?pageNum=1&pageSize=2&name=&author= get query/form
      request.get('/user/findUser', {
        params: queryParams
      })
          .then(res => {
            console.log(res)
            this.goodsList = res.data.list;
            console.log(this.goodsList)
            this.total = res.data.totalCount;
            //        total: 0, // 总条数
            //   pageSize: 10, // 每页显示条数
            //       currentPage: 1,// 当前页数
          })

    },
    //新增商品
    addGoods() {
      // 发送更新后的表单数据给后端
      //http://localhost:8099/goods/addGoods post json
      console.log("addObj", this.addFromJson)
      request.post("/goods/addGoods", this.addFromJson)
          .then(res => {
            console.log(res)
            this.$message({
              message: res.msg,
              type: 'success'
            });
            //如果执行成功则获取最新数据
            this.fetchData()
            this.addDialogVisible = false
          })


    }
    //编辑进行保存的方法
    , updateGoods() {
      //url：http://localhost:8099/goods/addGoods  post json
      console.log("updateObj",this.form)
      // 发送更新后的表单数据给后端
      request.post('/goods/updateGoods', this.form)
          .then(response => {
            // 处理后端返回的响应
            this.$message({
              message: '数据已成功更新',
              type: 'success'
            });
            this.dialogVisible = false; // 关闭弹窗
            //如果执行成功则获取最新数据
            this.fetchData()
          })
          .catch(error => {
            // 处理错误
            console.error('更新数据失败：', error);
          });
    },
    //删除方法
    showDeleteConfirm(row) {
      console.log("当前删除选择的数据是：" + JSON.stringify(row))
      let id = row.id;

      //message 弹框的最后一个
      this.$confirm('是否要删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        //url：http://localhost:8099/goods/deleteGoods?id=1 delete query/form
        console.log("delete Id", id)
        request.delete(`goods/deleteGoods?id=${id}`)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              //如果执行成功则获取最新数据
              this.fetchData()
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },
  mounted() {
    this.fetchData()
  },
};
</script>

<style scoped>
</style>
